<template>
  <div>
    <div style="height: 40px;display: flex;margin-bottom: 10px;align-items: center">
      <div style="width: 200px;border:1px solid #DCDFE6;border-radius: 6px;">
        <el-input
          clearable
          style="padding-left: 10px;padding-right: 10px;box-sizing: border-box"
          placeholder="商户名称"
          v-model="keyword"
        ></el-input>
      </div>
      <div>
        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary"
                   @click="loadSysmch">查询
        </el-button>
      </div>
    </div>
    <el-table
      :data="mchIdOptions"
      border
      stripe
      ref="table"
      height="300px"
      @row-dblclick="doubleClick"
      style="width: 100%;margin-top: 20px;margin-bottom: 20px">
      <el-table-column
        label="商户名称"
        width="150"
        align="center"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="联系手机"
        align="left"
        width="150"
        prop="phone">
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
      >
        <template slot-scope="scope">
            <span>
              {{ scope.row.areaName }}{{ scope.row.address }}
            </span>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                @pagination="loadSysmch"></pagination>
  </div>


</template>

<script>
import Pagination from '@/components/Pagination'
import { list as sysMchList } from '@/api/sysMch'

export default {
  data() {
    return {
      mchIdOptions: [],
      total: 0,
      pageSize: 20,
      pageNum: 1,
      keyword: ''
    }
  },
  created() {
    this.loadSysmch()
  },
  components: {
    Pagination
  },
  methods: {
    loadSysmch() {
      let params = new URLSearchParams()
      params.append('name', this.keyword)
      params.append('pageSize', this.pageSize)
      params.append('pageNum', this.pageNum)
      sysMchList(params).then(res => {
        this.mchIdOptions = res.data.data
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    //双击添加商品
    doubleClick(val) {
      this.$emit('mchDouble', val)
    },
  }
}
</script>

<style scoped>
  /deep/.el-dialog__body{
    padding: 0 !important;
  }
</style>
